<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/ten/reset.css" />
		<style type="text/css">
			.bg {
				height: 800px;
				width: 1500px;
				background-color: black;
			}

			.sunwuk {
				/* border: #CC0000 solid 1px; */
				position: absolute;
			}
			
			.showdazhao{
				position: absolute;
				border: #CC0000 solid 1px; 
				font-size: 90px;
				color: chartreuse;
				left: -500px;
				top: 350px;
			}
			.click{
				position: absolute;
				width: 30px;
			}
			.xuetiao{
				width: 268PX;
				position: relative;
				margin-left: 25px;
			}
			.xuetiao span{
				color: #CC0000;
				font-weight: 1000;
				padding-right: 5px;
			}
		</style>
	</head>
	<body>
		
		<div id="game" class="bg"></div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			
			// ====================英雄对象部分=============================
			function SunWuKong() {
				// 基础属性
				this.name = "齐天大圣孙悟空";
				this.maxHp = 100;
				this.hp = 70;
				this.speed = 2;
				// 是否正在施法
				this.isSkill = false;
				// 英雄节点
				this.node = $('<img class="sunwuk" src="img/ten/player_right.gif"><div class="xuetiao"><span>'+this.name+'</span><progress value="'+this.hp+'" max="'+this.maxHp+'"></div></img>');
				// 初始位置
				this.position = {
					x: 80,
					y: 80
				}
			}
			// 调用就可以在屏幕中部滚过一条消息
			SunWuKong.prototype.showDazhaoMsg = function(msg) {
				$("body").append('<span class="showdazhao">'+msg+'</span>');
				$("span.showdazhao").animate({
					left: 1000,
				}, 1800,function(){
					$("span.showdazhao").remove();
				});
			}
			// 大招实现，需要在init注册
			SunWuKong.prototype.dazhao = function() {
				// 施法
				var that = this;
				this.node.dblclick(function(event){
					// 正在施法
					that.isSkill = true;
					// 修改模型
					that.node.attr("src","img/ten/player2.gif");
					// 显示信息
					that.showDazhaoMsg("超级无敌风火轮");
				});
			}
			// 初始化
			SunWuKong.prototype.init = function() {
				// 初始化位置
				this.node.css("left", this.position.x);
				this.node.css("top", this.position.y);
				// 注册大招，如果实现了其他技能也在这里注册
				this.dazhao();
				// 放置英雄
				$("#game").append(this.node);

			}
			// 获取英雄当前位置
			SunWuKong.prototype.getPosition = function(){
				let pos = {
					x: this.node.position().top+parseInt(this.node.height()/2),
					y: this.node.position().left+parseInt(this.node.width()/2)
				}
				console.log("hero当前坐标:"+pos.x+":"+pos.y);
				
				return {
					x: this.node.position().top+parseInt(this.node.height()/2),
					y: this.node.position().left+parseInt(this.node.width()/2)
				}
				
			}
			
			// 移动核心算法
			SunWuKong.prototype.moveTo = function(position) {
				// 打断移动
				this.node.stop();
				// 获取英雄位置
				let heroPosition = this.getPosition();
				// 判断左右
				if(this.isSkill){
					// 正在施法的处理
				}
				else if(heroPosition.x>position.x){
					this.node.attr("src","img/ten/playerbig_left.gif");
				}else if(heroPosition.x<=position.x){
					this.node.attr("src","img/ten/player_right.gif");
				}
				// 计算速度 算法有问题，时快时慢
				// 计算距离 勾股定理
				// let a = Math.abs(heroPosition.x-position.x);
				// let b = Math.abs(heroPosition.y-position.y);
				// let c = parseInt(Math.sqrt(Math.pow(a,2)+Math.pow(b,2)));
				// let speed = c*this.speed;
				// console.log(speed);
				
				// 移动
				this.node.animate({
					left: position.x-parseInt(this.node.width()/2),
					top: position.y-parseInt(this.node.height()/2)
				}, 800);
			}
			
			// ====================工具函数部分=============================
			// 获取当前鼠标坐标
			function getMousePos(event) {
				var e = event || window.event;
				return {
					x: e.clientX,
					y: e.clientY
				}
			}
			
			// ====================主程序部分=============================
			// 初始化
			let sun = new SunWuKong();
			sun.init()
			
			// 控制逻辑
			$(window).click(function() {
				// 获取鼠标点击位置
				let clickPosition = getMousePos(event);
				console.log("点击:"+clickPosition);
				// 获取英雄坐标
				let heroPosition = sun.getPosition();
				console.log("英雄:"+heroPosition);
				
				// 点击特效
				$("body").prepend('<img class="click" src="img/ten/dianji.gif" alt="">');
				$("img.click").css({"left":clickPosition.x-25,"top":clickPosition.y-25})
				$("img.click").animate({
					width: 50,
				}, 400,function(){
					$("img.click").remove()
				});
				
				// 移动
				sun.moveTo(clickPosition);
				
			});
		</script>
	</body>
</html>
